<template>
	<div>
		<el-dialog title="订单预览" v-model="dialogVisible" class="redius8" width="1200" center :before-close="handleClose"
			:close-on-click-modal="false" :close-on-press-escape="false">
			<div>
				<h3 class="color333 fb fs16">收货信息</h3>
				<div>
					<el-table :data="addressList" border style="width: 100%">
						<el-table-column prop="recipient" label="姓名" width="180">
							<template v-slot="scope">
								{{scope.row.recipient}}
							</template>
						</el-table-column>
						<el-table-column prop="recipientPhone" label="手机号" width="180">
							<template v-slot="scope">
								{{scope.row.recipientPhone}}
							</template>
						</el-table-column>
						<el-table-column prop="shippingAddress" label="地址">
							<template v-slot="scope">
								{{scope.row.shippingAddress}}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<h3 class="color333 fb fs16 mt20">商品信息</h3>
				<el-table :data="form.commodityList" border style="width: 100%" show-summary
					:summary-method="getSummaries">
					<el-table-column label="商品图片" align="center" prop="mainImageUrl">
						<template v-slot="scope">
							<div class="relative" style="width: 30px;margin: 0 auto;">
								<img :src="scope.row.mainImageUrl ? scope.row.mainImageUrl : defaultImg" alt=""
									class="radius8" width="30" height="30" />
								<img v-if="scope.row.type == 1" class="gift" src="/src/assets/images/gift.png" style="width: 20px;" alt="" />
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="commodityName" label="商品名称" align="center" :show-overflow-tooltip="true"
						width="180" />
					<el-table-column prop="commodityCode" label="商品编码" align="center" width="180" />
					<el-table-column prop="quantity" label="最小数量" align="center" />
					<el-table-column prop="unitPrice" label="价格" align="center">
						<template v-slot="scope">
							<div class="relative" style="width: 90px;margin: 0 auto;">
								￥{{scope.row.unitPrice || 0}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="numberOfShippingBoxes" label="箱数量" align="center" />
					<el-table-column prop="caseUnitPrice" label="箱价" align="center">
						<template v-slot="scope">
							<div class="relative" style="width: 90px;margin: 0 auto;">
								￥{{scope.row.caseUnitPrice || 0}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="subtotal" label="小计" align="center">
						<template v-slot="scope">
							<div class="relative" style="width: 90px;margin: 0 auto;">
								￥{{scope.row.subtotal || 0}}
							</div>
						</template>
					</el-table-column>
				</el-table>
				<div class="text-right mt20 pb30 ">
					<span>订单金额：</span><span class="color-red fs18 fb mr20">￥{{form.orderTotalAmount || 0}}</span>
					<span>订单差额：</span><span class="color-red fs18 fb mr20">￥{{form.differenceAmount || 0}}</span>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: {
			form: {
				type: Object,
				default: res => {
					{}
				}
			}
		},
		data() {
			return {
				dialogVisible: false,
				addressList:[]
			}
		},
		methods: {
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 4) {
						sums[index] = '合计';
						return;
					}
					if (index == 5 || index == 7) {
						const values = data.map(item => Number(item[column.property]));
						if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr);
								if (!isNaN(value)) {
									return prev + curr;
								} else {
									return prev;
								}
							}, 0);
							if(index == 5){
								sums[index] = sums[index].toFixed(3)
							}
							else if (index == 7) {
								sums[index] = sums[index].toFixed(2) + ' 元';
							}
						} else {
							sums[index] = '';
						}
					}
				});

				return sums;
			},
			open() {
				this.dialogVisible = true
				this.addressList = [
					{
						recipient:this.form.recipient,
						recipientPhone:this.form.recipientPhone,
						shippingAddress: this.form.shippingAddress
					}
				]
				console.log(this.form.shippingAddress,'this.form.shippingAddress')
			},
			handleClose() {
				this.dialogVisible = false
			}
		}
	}
</script>

<style>
</style>